<template>
	<view>
		<!-- 顶部用户信息页 -->
		<view class="page-header">
			<view class="flex user-info-wrap">
				<view class="user-info flex">
					<view class="user-avatar">
						<u-avatar :src="userInfo.avatar" shape="circle" size="120"></u-avatar>
					</view>
					<view class="user-nickname">{{ userInfo.nickname }}</view>
					<u-icon name="edit-pen"  :size="50" @click="goPage('/pages/my/editInfo')"></u-icon>
				</view>
				
				<view class="idcheck" @click="goPage('/pages/my/idcheck')">
					<u-text text="已实名" v-if="userInfo.is_idcheck==1" color="#4cd964" :size="26" bold></u-text>
					<u-text text="未实名" v-else color="#dd524d" :size="26" bold></u-text>
				</view>
			</view>
			
			<view class="prime-info flex" v-if="userInfo.prime_info">
				<view class="prime-info-item flex u-flex-between">
					<view class="info flex">
						<view class="icon flex">
							<image class="image" src="../../static/king.png" mode="widthFix"></image>
							<view class="u-flex u-flex-column">
								<text class="text">{{ userInfo.prime_info.grade_type_display }}</text>
								<text class="expire" v-if="userInfo.prime_info.status>0">{{ userInfo.prime_info.status==3 ? '已过期':(userInfo.prime_info.expire_date_format+'前有效') }}</text>
							</view>
							
						</view>
						<u-text :show="userInfo.prime_info.status==0" :text="userInfo.prime_info.rights_info" :size="26" :lines="2"></u-text>
					</view>
					
					<view class="open-card" @click="openCard(userInfo.prime_info.id , 3)" v-if="userInfo.prime_info.status==0">立即开卡</view>
					<view class="open-card" @click="openCard(userInfo.prime_info.id , 4)" v-if="userInfo.prime_info.status==1">立即升级</view>
					<view class="highest-level" v-if="userInfo.prime_info.status==2">最高等级</view>
					<view class="open-card" @click="openCard(userInfo.prime_info.id , 5)" v-if="userInfo.prime_info.status==3">立即续费</view>
				</view>
			</view>
			
			<view class="prime-code flex">
				<view class="qr-text" style="margin-top: 0;margin-bottom: 20rpx;">会员码</view>
				<view class="qr-code">
					<uqrcode ref="uqrcode" canvas-id="qrcode" :value="'cusUid='+userInfo.uid" :options="{ margin: 0, size: 80, sizeUnit: 'rpx' }"></uqrcode>
				</view>
				<view class="qr-text">会员编号：{{ userInfo.usn }}</view>
				
			</view>
		</view>
		
		<template v-if="userInfo.rel_sales_id>0">
			<!-- 我的客户 -->
			<view class="page-item">
				<view class="item-header flex">
					<u-text color="#333" size="32" :bold="true" text="我的客户"></u-text>
					<view class="right-opt"  @click="goPage('/pagesA/pages/sales/customers')">
						<u-text suffixIcon="arrow-right" color="#909399" size="28" iconStyle="font-size: 32rpx" text="客户列表"></u-text>
					</view>
				</view>
				
				<view class="item-content flex sign-wrap">
					<view class="sign-number flex">
						<u-text mode="number" color="#ff5a5f" align="center" size="56" :bold="true" :text="customerState.yesPlus"></u-text>
						<u-text mode="number" color="#999" align="center" size="28" text="昨日新增"></u-text>
					</view>
					
					<view class="sign-number flex">
						<u-text mode="number" color="#ff5a5f" align="center" size="56" :bold="true" :text="customerState.totalNums"></u-text>
						<u-text mode="number" color="#999" align="center" size="28" text="总客户数"></u-text>
					</view>
					
					<view class="sign-number flex">
						<u-text mode="number" color="#ff5a5f" align="center" size="56" :bold="true" :text="customerState.todayVist"></u-text>
						<u-text mode="number" color="#999" align="center" size="28" text="今日访问数"></u-text>
					</view>
				</view>
			</view>
			
			<!-- 销售数据 -->
			<view class="page-item">
				<view class="item-header flex">
					<u-text color="#333" size="32" :bold="true" text="销售数据"></u-text>
					<view class="right-opt"  @click="goPage('/pagesA/pages/sales/orders')">
						<u-text suffixIcon="arrow-right" color="#909399" size="28" iconStyle="font-size: 32rpx" text="销售明细"></u-text>
					</view>
				</view>
				
				<view class="item-content flex sign-wrap">
					<view class="sign-number flex">
						<u-text mode="number" color="#ff5a5f" align="center" size="36" :bold="true" :text="salesState.yesOrderAmt"></u-text>
						<u-text mode="number" color="#999" align="center" size="26" text="昨日销售额"></u-text>
					</view>
					
					<view class="sign-number flex">
						<u-text mode="number" color="#ff5a5f" align="center" size="36" :bold="true" :text="salesState.monthOrderAmt"></u-text>
						<u-text mode="number" color="#999" align="center" size="26" text="本月销售额"></u-text>
					</view>
					
					<view class="sign-number flex">
						<u-text mode="number" color="#ff5a5f" align="center" size="36" :bold="true" :text="salesState.totalOrderAmt"></u-text>
						<u-text mode="number" color="#999" align="center" size="26" text="总销售额"></u-text>
					</view>
				</view>
			</view>
			
			<!-- 我的工具 -->
			<view class="page-item">
				<view class="item-header flex">
					<u-text color="#333" size="32" :bold="true" text="我的工具"></u-text>
					<view class="right-opt" @click="moreTools">
						<u-text suffixIcon="arrow-right" color="#909399" size="28" iconStyle="font-size: 32rpx" text="更多工具"></u-text>
					</view>
				</view>
				
				<view class="item-content">
					<u-grid
						:border="false"
						col="4"
					>
						<u-grid-item @click="couponVerify()">
							<u-icon
								name="coupon"
								:size="68"
							></u-icon>
							<text class="grid-text">票券核销</text>
						</u-grid-item>
						
						<u-grid-item @click="customerIdendify()">
							<u-icon
								name="scan"
								:size="68"
							></u-icon>
							<text class="grid-text">客户识别</text>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
		</template>
		
		<!-- 我的路线 -->
		<view class="page-item">
			<view class="item-header flex">
				<u-text color="#333" size="32" :bold="true" text="我的路线"></u-text>
				<view class="right-opt" @click="routes()">
					<u-text suffixIcon="arrow-right" color="#909399" size="28" iconStyle="font-size: 32rpx" text="全部路线"></u-text>
				</view>
			</view>
			
			<view class="item-content">
				<u-grid
					:border="false"
					col="4"
				>
					<u-grid-item @click="routes(0)">
						<u-icon
							name="red-packet"
							:size="68"
						></u-icon>
						<text class="grid-text">待付款</text>
					</u-grid-item>
					
					<u-grid-item @click="routes(1)">
						<u-icon
							name="coupon"
							:size="68"
						></u-icon>
						<text class="grid-text">待确认</text>
					</u-grid-item>
					
					<u-grid-item @click="routes(2)">
						<u-icon
							name="calendar"
							:size="68"
						></u-icon>
						<text class="grid-text">待出行</text>
					</u-grid-item>
					
					<u-grid-item @click="routes(3)">
						<u-icon
							name="bookmark"
							:size="68"
						></u-icon>
						<text class="grid-text">待评价</text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		
		<!-- 我的金币 -->
		<view class="page-item">
			<view class="item-header flex">
				<u-text color="#333" size="32" :bold="true" text="我的金币"></u-text>
				<view class="right-opt"  @click="goPage('/pages/golds/records')">
					<u-text suffixIcon="arrow-right" color="#909399" size="28" iconStyle="font-size: 32rpx" text="金币明细"></u-text>
				</view>
			</view>
			
			<view class="item-content flex sign-wrap">
				<view class="sign-number flex" @click="goPage('/pagesA/pages/sign/sign')">
					<u-text mode="number" color="#ff5a5f" align="center" size="76" :bold="true" :text="userInfo.golds"></u-text>
					<u-tag text="签到领金币" size="mini" type="warning" icon="/static/icon_rmb.png" @click="goPage('/pages/sign/sign')"></u-tag>
				</view>
				
				<view class="sign-btns flex">
					<view class="sign-btn flex" @click="goPage('/pages/order/mall')">
						<u-icon name="gift" color="#c14b09" size="80"></u-icon>
						<u-text color="#666" align="center" size="30" text="兑换记录"></u-text>
					</view>
					
					<view class="sign-btn flex" @click="goPage('/pagesA/pages/sign/sign')">
						<u-icon name="file-text" color="#f9ae3d" size="80"></u-icon>
						<u-text color="#666" align="center" size="30" text="签到记录"></u-text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 更多操作 -->
		<view class="page-item flex more-btns">
			<view class="more-btn flex" @click="goPage('/pagesA/pages/spread/teammember')">
				<u-icon name="share" color="#c28219" size="60"></u-icon>
				<u-text color="#999" align="center" size="26" text="我的团队"></u-text>
			</view>
			
			<view class="more-btn flex" @click="goPage('/pagesA/pages/address/address')">
				<u-icon name="map" color="#3e32c3" size="60"></u-icon>
				<u-text color="#999" align="center" size="26" text="我的地址"></u-text>
			</view>
			
			<view class="more-btn flex" @click="goPage('/pagesA/pages/coupon/coupon')">
				<view class="red-dot-tip">{{ redDotTipNums.coupon >= 99 ? 99 : redDotTipNums.coupon }}</view>
				<u-icon name="coupon" color="#ff5a5f" size="60"></u-icon>
				<u-text color="#999" align="center" size="26" text="优惠券"></u-text>
			</view>
			
			<view class="more-btn flex" @click="openKf()">
				<u-icon name="server-man" color="#c14b09" size="60"></u-icon>
				<u-text color="#999" align="center" size="26" text="售后服务"></u-text>
			</view>
			
			<view class="more-btn flex" @click="goPage('/pagesA/pages/message/message')">
				<view class="red-dot-tip">{{ redDotTipNums.message >= 99 ? 99 : redDotTipNums.message }}</view>
				<u-icon name="weixin-fill" color="#3cc51f" size="60"></u-icon>
				<u-text color="#999" align="center" size="26" text="我的消息"></u-text>
			</view>
		</view>

		<view class="page-logout">
			<u-button type="error"  @click="logout()">退出登录</u-button>
		</view>
		<!-- 客服服务弹窗 -->
		<ftx-kfservice :show="showKf" @change="changeVal"></ftx-kfservice>
		
		<!-- 会员订购升级续费页 -->
		<ftx-prime :show="showPrime" :level-id="primeLevelId" :order-type="primeOrderType" @close="closePrime" @fail="failPrime" @success="sucessPrime"></ftx-prime>
	</view>
</template>

<script>
	import { mpLogout,salesStatistic,customerStatistic,resyncPrimeInfo,resyncUserInfo,getRedDotTipNums } from '@/api/api.js'
	export default {
		data() {
			return {
				showKf: false,
				userInfo: {},
				customerState: {
				    yesPlus: 0,
				    totalNums: 0,
					todayVist: 0
				},
				salesState: {
				    yesOrderAmt: 0,
				    monthOrderAmt: 0,
					totalOrderAmt: 0
				},
				showPrime: false,
				primeLevelId: 0,
				primeOrderType: 3,
				redDotTipNums: {
					coupon: 0,
					message: 0
				}
			};
		},
		onLoad() {
			console.log('onLoad')
		},
		onShow() {
			let userId= uni.getStorageSync('ftxUserId') || 0
			if ( !userId ) {
				return uni.navigateTo({
					url: '/pagesA/pages/login/login'
				})
			}
			
			resyncUserInfo().then(res => {
				this.userInfo = res.data
				uni.setStorageSync('ftxUserInfo' , this.userInfo)
				
				if ( this.userInfo.rel_sales_id > 0 ) {
					customerStatistic().then(res => {
						this.customerState = res.data
					})
					salesStatistic().then(res => {
						this.salesState = res.data
					})
				}
			})
			this.userInfo = uni.getStorageSync('ftxUserInfo') || {}
			
			getRedDotTipNums().then(res=>{
				this.redDotTipNums = res.data
			})
		},
		mounted() {
		},
		methods:{
			login: function() {
				uni.login({
				  provider: 'weixin',
				  success: function (loginRes) {
				    console.log('success',loginRes);
				  },
				  fail(error) {
				  	console.log(error);
				  }
				})
			},
			goPage: function(pageUrl) {
				uni.navigateTo({
					url: pageUrl
				})
			},
			routes: function(current) {
				if ( current == undefined ) {
					current = 0
				}
				uni.navigateTo({
					url: `/pages/order/routes?current=${current}`
				})
			},
			changeVal: function (opt) {
				if (typeof opt != 'object') opt = {};
				var action = opt.action || '';
				var value = opt.value || '';
				this[action] && this[action](value);
			},
			openKf: function() {
				this.showKf = true
			},
			closeKf:function() {
				this.showKf = false
			},
			logout: function() {
				uni.showLoading({
					mask: true,
					title: '正在退出'
				})
				mpLogout().then(_ => {
					uni.removeStorageSync('ftxUserInfo')
					uni.removeStorageSync('ftxToken')
					uni.removeStorageSync('ftxUserId')
					
					uni.showToast({
						title: '已退出登录',
						duration: 2000
					})
					
					setTimeout(function(){
						uni.navigateTo({
							url: '/pagesA/pages/login/login'
						})
					},2000)
				})
			},
			openCard: function(levelId,orderType) {
				this.showPrime = true
				this.primeOrderType = orderType
				this.primeLevelId = levelId
			},
			failPrime: function(err) {
				console.log('pay fail',err)
				this.closePrime()
			},
			closePrime: function() {
				this.showPrime = false
			},
			sucessPrime: function() {
				resyncPrimeInfo().then(res=>{
					this.userInfo.prime_info = res.data
					uni.setStorageSync('ftxUserInfo' , this.userInfo)
					
					this.closePrime()
				})
			}
			// 打开扫码-核销票券
			,couponVerify() {
				uni.scanCode({
					scanType: ['qrCode'],
					success: function (res) {
						uni.navigateTo({
							url: `/pagesA/pages/coupon/verify?id=${res.result}`
						})
					}
				});
			}
			// 打开扫码-客户识别
			,customerIdendify() {
				uni.scanCode({
					scanType: ['qrCode'],
					success: function (res) {
						uni.navigateTo({
							url: `/pagesA/pages/sales/customerIdentify?${res.result}`
						})
					}
				});
			}
			,moreTools() {
				uni.showToast({
					title: '暂无更多，不断增加中！',
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}
	.sign-wrap {
		justify-content: space-between;
		.sign-number {
			flex-direction: column;
			width: 200rpx;
		}
		.sign-btns {
			justify-content: center;
			align-items: center;
			.sign-btn {
				flex-direction: column;
				align-items: center;
				.u-icon{
					padding: 4rpx;
					background-color: #f3f4f6;
					border-radius: 10rpx;
					margin-bottom: 10rpx;
				}
			}
			.sign-btn:not(:last-child) {margin-right: 20rpx;}
		}
	}
	
	.more-btns {
		align-items: center;
		justify-content: space-between;
		.more-btn {
			flex-direction: column;
			align-items: center;
			position: relative;
			.red-dot-tip {
				position: absolute;
				right: -10rpx;
				top: -14rpx;
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				background-color: red;
				border-radius: 50%;
				color: #fff;
				font-size: 22rpx;
				font-weight: bold;
				text-align: center;
			}
			.u-icon{
				padding: 4rpx;
				background-color: #f3f4f6;
				border-radius: 10rpx;
				margin-bottom: 10rpx;
			}
		}
	}
	
	.page-header {
		padding: 40rpx 36rpx 40rpx 36rpx;
		background-color: #ff5a5f30;
		color: #333;
		.user-info-wrap {
			justify-content: space-between;
			align-items: center;
			.user-info {
				align-items: center;
				.user-avatar {
					margin-right: 14rpx;
				}
				.user-avatar .image{
					width: 130rpx;
					height: 130rpx;
				}
				.user-nickname {
					font-size: 32rpx;
					font-weight: bold;
				}
			}
			.idcheck {
				color: $uni-price-color;
				font-size: 24rpx;
				font-weight: bold;
			}
		}
		
		.prime-code {
			flex-direction: column;
			align-items: center;
			margin-top: 30rpx;
			.qr-code {
				
			}
			.qr-text {
				margin-top: 20rpx;
				font-size: 28rpx;
				font-weight: bold;
			}
		}
		.prime-info {
			margin-top: 60rpx;
			background-color: #e2970d85;
			border-radius: 12rpx;
			padding: 20rpx;
			height: 200rpx;
			justify-content: space-between;
			align-items: center;
			.prime-info-item {
				@include flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 200rpx;
				.info {
					flex-direction: column;
					flex: 1;
					.icon {
						align-items: center;
						margin-bottom: 20rpx;
						.image {
							width: 100rpx;
							margin-right: 20rpx;
						}
						.text {
							font-size: 32rpx;
							font-weight: bold;
						}
						.expire {
							font-size: 26rpx;
							color: #c14b09;
							margin-top: 10rpx;
						}
					}
					.sub {
						font-size: 26rpx;

					}
				}
				.open-card {
					@include flex;
					justify-content: center;
					margin-left: 30rpx;
					border: 1rpx solid #fff;
					background-color: #c14b09;
					width: 180rpx;
					padding: 14rpx 0rpx;
					font-size: 32rpx;
					color: #fff;
					border-radius: 24rpx;
				}
				.highest-level {
					font-size: 26rpx;
					color: yellow;
				}
			}
		}
	}
	.page-logout{
		padding: 0rpx 30;
		width: 690rpx;
		margin: 40rpx auto;
	}
	.page-item {
		background-color: #fff;
		border-radius: 18rpx;
		padding: 30rpx;
		width: 624rpx;
		margin: 40rpx auto;
		.item-header {
			justify-content: space-between;
			padding-bottom: 28rpx;
			border-bottom: 1rpx solid #f2f2f2;
			.right-opt {
				width: 150rpx;
			}
		}
		.item-content {
			margin-top: 30rpx;
		}
		.grid-text {
			font-size: 28rpx;
			color: $uni-text-color-grey;
		}
	}
</style>
